<template>
	<view>
		<zmm-watermark :watermark="userStore.watermark" v-if="userStore.watermark"></zmm-watermark>
		<view class="content detail">
			<!--客户信息-->
			<view class="detail-item">
				<uni-section title="客户信息" type="line"></uni-section>
				<view class="detail-content">
					<!-- <view class="detail-text">
						ID：
						<text>{{info.id}}</text>
					</view> -->
					<view class="detail-text">
						区域：
						<text>{{arrText(setStore.allProvinceList, info.regionCode)}}</text>
					</view>
					<view class="detail-text">
						客户类别：
						<uni-tag size="small" :text="arrText(wholesalerList, info.customerType)" />
					</view>
					<view class="detail-text">
						客户姓名：
						<text>{{info.name}}</text>
					</view>
					<view class="detail-text">
						联系电话：
						<text>{{info.phone}}</text>
						<text class="detail-text-copy" @click="copyText(info.phone)">复制</text>
						<text class="detail-text-copy" @click="call(info.phone)">拨打</text>
					</view>
					<view class="main-flex detail-text detail-flex-start">
						客户头像：
						<view class="detail-text_r">
							<up-image width="120rpx" height="120rpx" @click.stop="previewImg(info.heardImg)" :src="info.heardImg" :lazy-load="true"></up-image>
						</view>
					</view>
					<view class="detail-text">
						客户区域：
						<text>{{info.province}}</text>
						<text class="detail-text-copy" @click="copyText(info.province)">复制</text>
					</view>
					<view class="detail-text">
						会员等级：
						<text>{{info.levelName}}</text>
					</view>
					<view class="detail-text">
						余额：
						<text>{{info.balance}}</text>
					</view>
					<view class="detail-text">
						积分：
						<text>{{info.integral}}</text>
					</view>
					<view class="detail-text">
						推广码：
						<text>{{info.spreadCode}}</text>
					</view>
					<view class="detail-text">
						销售人员：
						<text>{{info.salesmanName}}</text>
					</view>
					<view class="detail-text">
						资料审核：
						<uni-tag
							size="small"
							:type="info.examineFlag === 1 ? 'success' : info.examineFlag === 2 ? 'error' : ''"
							:text="arrText(examineFlagList, info.examineFlag)" />
					</view>
					<view class="detail-text red" v-if="info.examineFlag === 2">
						未通过理由：
						<text>{{info.remark}}</text>
					</view>
					<view class="detail-text">
						平台审核：
						<uni-tag
							size="small"
							:type="info.reviewFlag === 1 ? 'success' : info.reviewFlag === 2 ? 'error' : ''"
							:text="info.reviewFlag === 1 ? '审核通过' : info.reviewFlag === 2 ? '审核未过' : '未审核'" />
					</view>
					<view class="detail-text">
						公司名称：
						<text>{{info.company}}</text>
						<text class="detail-text-copy" @click="copyText(info.company)">复制</text>
					</view>
					<view class="detail-text">
						公司地址：
						<text>{{info.addr}}</text>
						<text class="detail-text-copy" @click="copyText(info.addr)">复制</text>
					</view>
					<view class="main-flex detail-text detail-flex-start">
						营业执照：
						<view class="detail-text_r">
							<up-image width="120rpx" height="120rpx" @click.stop="previewImg(info.businessLicenseImg)" :src="info.businessLicenseImg" :lazy-load="true"></up-image>
						</view>
					</view>
					<view class="detail-text">
						执照验证：
						<uni-tag
						size="small"
						:type="info.extendFlag === 1 ? 'success' : info.extendFlag === 2 ? 'error' : ''"
						:text="arrText(extendFlagList, info.extendFlag)" />
					</view>
					<view class="main-flex detail-text detail-flex-start">
						门店图片：
						<view class="detail-text_r">
							<up-image width="120rpx" height="120rpx" @click.stop="previewImg(info.storeImg)" :src="info.storeImg" :lazy-load="true"></up-image>
						</view>
					</view>
					<view class="main-flex detail-text detail-flex-start">
						形象图片：
						<view class="detail-text_r">
							<up-image width="120rpx" height="120rpx" @click.stop="previewImg(info.storeFaceImg)" :src="info.storeFaceImg" :lazy-load="true"></up-image>
						</view>
					</view>
					<view class="detail-text">
						工商号：
						<text>{{info.storeId}}</text>
					</view>
					<view class="detail-text">
						信用代码：
						<text>{{info.companyCode}}</text>
					</view>
					<view class="detail-text">
						创建时间：
						<text>{{info.createTime}}</text>
					</view>
				</view>
			</view>
			
			<!--操作-->
			<view class="detail-btns main-flex" v-if="info.id">
				
				<view v-if="checkPermi(['zhouyz:order:add'])" class="detail-btn main-flex">
					<up-button
						class="detail-btn-info"
						type="primary"
						@click.stop="order()">
						<uni-icons class="table-operate-btn-icon" type="shop" size="14" color="#ffffff"></uni-icons>
						<view class="table-operate-btn-text">下单</view>
					</up-button>
				</view>
				
				<view v-if="checkPermi(['zhouyz:customer:wholesaler']) && info.reviewFlag === 0" class="detail-btn main-flex">
					<up-button
						class="detail-btn-info"
						type="primary"
						@click.stop="openEdit(2)">
						<uni-icons class="table-operate-btn-icon" type="auth" size="14" color="#ffffff"></uni-icons>
						<view class="table-operate-btn-text">平台审核</view>
					</up-button>
				</view>
				
				<view v-if="checkPermi(['zhouyz:customer:customerType']) && info.examineFlag === 1 && info.reviewFlag === 1" class="detail-btn main-flex">
					<up-button
						class="detail-btn-info"
						type="primary"
						@click.stop="openEdit(3)">
						<uni-icons class="table-operate-btn-icon" type="staff" size="14" color="#ffffff"></uni-icons>
						<view class="table-operate-btn-text">{{arrText(wholesalerList, info.customerType)}}</view>
					</up-button>
				</view>
				
				<!-- <view v-if="checkPermi(['zhouyz:customer:edit'])" class="detail-btn main-flex">
					<up-button
						class="detail-btn-info"
						type="primary"
						@click.stop="openEdit(1)">
						<uni-icons class="table-operate-btn-icon" type="locked" size="14" color="#ffffff"></uni-icons>
						<view class="table-operate-btn-text">重置密码</view>
					</up-button>
				</view> -->
				<view v-if="checkPermi(['zhouyz:customer:edit']) && userStore.roleKey.indexOf('sales') === -1" class="detail-btn main-flex">
					<up-button
						class="detail-btn-info"
						type="primary"
						@click.stop="edit()">
						<uni-icons class="table-operate-btn-icon" type="compose" size="14" color="#ffffff"></uni-icons>
						<view class="table-operate-btn-text">修改</view>
					</up-button>
				</view>
				<view v-if="checkPermi(['zhouyz:customer:remove'])" class="detail-btn main-flex">
					<up-button
						class="detail-btn-info"
						type="error"
						@click.stop="deleteFun()">
						<uni-icons class="table-operate-btn-icon" type="trash" size="14" color="#ffffff"></uni-icons>
						<view class="table-operate-btn-text">删除</view>
					</up-button>
				</view>
			</view>
			
		</view>
		
		
		<!--确认弹窗-->
		<up-popup :z-index="90" round="5" closeable :show="showEdit" @close="editCancel" mode="center">
			<view class="edit">
				<view class="edit-header">{{editTitle}}</view>
				<view class="edit-form">
					<uni-forms
						ref="editRef"
						:rules="editRules"
						:modelValue="editModel"
						label-width="160rpx">
						<uni-forms-item label="新密码" name="password" required v-if="editType === 1">
							<uni-easyinput type="password" v-model="editModel.password" placeholder="请输入新密码"></uni-easyinput>
						</uni-forms-item>
						<uni-forms-item label="审核状态" name="examineFlag" required v-if="editType === 2">
							<view class="edit-form-checkbox main-flex">
								<uni-data-checkbox v-model="editModel.examineFlag" :localdata="statusList" />
							</view>
						</uni-forms-item>
						<uni-forms-item label="不通过理由" name="remark" v-if="editModel.examineFlag == 2">
							<uni-easyinput type="textarea" v-model="editModel.remark" placeholder="请输入不通过理由"></uni-easyinput>
						</uni-forms-item>
						<uni-forms-item label="客户类别" name="customerType" required v-if="editType === 3">
							<view class="edit-form-checkbox main-flex">
								<uni-data-checkbox v-model="editModel.customerType" :localdata="wholesalerList1" />
							</view>
						</uni-forms-item>
					</uni-forms>
					<view class="edit-footer main-flex">
						<up-button
							class="edit-footer-item"
							@click="editCancel"
							text="取消"></up-button>
						<up-button
							class="edit-footer-item"
							text="确认"
							type="primary"
							@click="editConfirm"></up-button>
					</view>
				</view>
			</view>
		</up-popup>
		
	</view>
</template>

<script setup>
import { onLoad, onShow } from '@dcloudio/uni-app';
import { computed, onMounted, ref } from 'vue';
import { tab, auth, modal } from "@/plugins"
import { getTitle } from "@/utils/getter"
import { checkPermi, checkRole, checkOnlyPermi, checkOnlyRole } from "@/utils/permission"
import { 
	customerInfo,
	customerPassword,
	customerAdd,
	customerExamine,
	customerDel,
	customerWholesaler } from "@/api/erp_api/customer"
import { arrText, copyText, previewImg } from '@/utils/ty.js';
import useUserStore from '@/store/modules/user'
import useSetStore from '@/store/modules/set'
import { wholesalerList, examineFlagList, extendFlagList } from '@/utils/config.js';

	const userStore = useUserStore()
	const setStore = useSetStore()
	onLoad(async (option) => {
		if (option.id) {
			id.value = option.id
		}
	})
	
	onShow(() => {
		getDetail()
	})
	
	// 数据查询
	const id = ref('')
	const info = ref({})
	const isLoading = ref(false)
	
	const getDetail = () => {
		const params = {
			id: id.value
		}
		isLoading.value = true
		uni.showLoading({
			title: '数据加载中...'
		})
		customerInfo(params).then(res => {
			info.value = res.data || {}
			isLoading.value = false
			uni.hideLoading()
    }).catch(() => {
			isLoading.value = false
			uni.hideLoading()
		})
	}
	
	// 拨打电话
	const call = (phone) => {
		uni.makePhoneCall({
			phoneNumber: phone
		})
	}
	
	// 修改
	const showEdit = ref(false)
	const editRef = ref(null)
	const isSubmit = ref(false)
	const editModel = ref({
		password: '',
		status: '',
		customerType: ''
	})
	const editRules = ref({})
	
	
	//打开修改
	const editType = ref('')
	const editTitle = ref('')
	const openEdit = (type) => {
		editType.value = type
		if (type === 1) { // 重置密码
			editTitle.value = '重置密码'
			editRules.value = {
				password: {
					rules: [{ required: true, errorMessage: '请输入新密码' }]
				}
			}
		} else if (type === 2) { // 资料审核
			editTitle.value = '资料审核'
			editRules.value = {
				examineFlag: {
					rules: [{ required: true, errorMessage: '请选择审核状态' }]
				}
			}
		} else if (type === 3) { // 设置角色
			editTitle.value = '设置角色'
			editRules.value = {
				customerType: {
					rules: [{ required: true, errorMessage: '请选择客户类别' }]
				}
			}
			editModel.value.customerType = info.value.customerType
		}
		showEdit.value = true
	}
	
	// 取消修改
	const editCancel = () => {
		showEdit.value = false
		editType.value = ''
		editTitle.value = ''
		editRules.value = {}
		isSubmit.value = false
		editModel.value = {
			password: '',
			status: '',
			customerType: ''
		}
	}
	
	const statusList = [{ value: 1, text: '审核通过'},{ value: 2, text: '不审核通过'}]
	const editConfirm = () => {
		editRef.value.validate().then(formRes => {
			if (editType.value == 1) {
				customerPasswordFun({
					...formRes,
					id: id.value
				})
			} else if (editType.value == 2) {
				customerExamineFun({
					...formRes,
					id: id.value
				})
			} else if (editType.value == 3) {
				customerWholesalerEdit({
					...formRes,
					id: id.value
				})
			}
		})
	}
	
	// 重置密码
	const customerPasswordFun = (params) => {
		isSubmit.value = true
		customerPassword(params).then((res) => {
			modal.showToast(res.msg)
			editCancel()
			uni.$emit('refreshList');  // 触发刷新事件
		}).catch(err => {
			modal.showToast(err)
			isSubmit.value = false
		})
	}
	
	// 资料审核
	const customerExamineFun = (params) => {
		isSubmit.value = true
		customerExamine(params).then((res) => {
			modal.showToast(res.msg)
			getDetail()
			uni.$emit('refreshList');  // 触发刷新事件
			editCancel()
		}).catch(err => {
			modal.showToast(err)
			isSubmit.value = false
		})
	}
	
	// 设定批发商
	const customerWholesalerEdit = (params) => {
		uni.showModal({
			title: '提示',
			content: `是否确认${arrText(wholesalerList, params.customerType)}?`,
			success: function (res) {
				if (res.confirm) {
					customerWholesalerFun(params)
				}
			}
		})
	}
	
	const customerWholesalerFun = (params) => {
		if (isSubmit.value) return false
		isSubmit.value = true
		customerWholesaler(params).then((res) => {
			modal.showToast(res.msg)
			isSubmit.value = false
			uni.$emit('refreshList');  // 触发刷新事件
			getDetail()
			editCancel()
		}).catch(err => {
			isSubmit.value = false
		})
	}
	
	//删除
	const deleteFun = () => {
		uni.showModal({
			title: '删除',
			content: `是否确认删除?`,
			success: function (res) {
				if (res.confirm) {
					deleteOne(id.value)
				}
			}
		})
	}
	
	const deleteOne = (id) => {
		if (isSubmit.value) return false
		isSubmit.value = true
		customerDel({
			id
		}).then(async res => {
			modal.showToast(res.msg)
			await uni.$u.sleep(1000)
			isSubmit.value = false
			uni.$emit('refreshList');  // 触发刷新事件
			uni.navigateBack({
				delta: 1
			})
		}).catch((err) => {
			isSubmit.value = false
		})
	}
	
	// 编辑
	const edit = () => {
		uni.navigateTo({
			url: `/pages/customer/customerEdit?id=${id.value}`
		})
	}
	
	// 下单
	const order = () => {
		uni.navigateTo({
			url: `/pages/order/orderAdd?customerId=${id.value}`
		})
	}
	
	const wholesalerList1 = computed(() => {
		return userStore.roleKey.indexOf('sales') > -1 ? wholesalerList.slice(0, 2) : wholesalerList
	})
	
</script>

<style scoped lang="scss">
</style>
